<template>
    <div class="app-container">
        <div v-if="status">
            <p class="color nav-p center">恭喜您，充值成功</p>
            <img class="img" :src="successImg" alt="">
            <p class="color center title-p">
                <span>本次转入金额</span>
                <span class="spanBtn" @click="toRoutes('assetsReport')">请点此查看</span>
            </p>
        </div>
        <div v-else>
            <p class="color nav-p center">充值失败</p>
            <img class="img" :src="errorImg" alt="">
            <p class="color center title-p">
                <span>失败原因为：支付失败。</span>
                <span class="spanBtn" @click="toRoutes('changeMoneyIndex')">继续充值</span>
            </p>
        </div>
    </div>
</template>
<script>
export default {
    name:"payResults",
    data(){
        return {
            status:null,
            successImg:require("../../../static/img/success.png"),
            errorImg:require("../../../static/img/error.png")
        }
    },
    mounted(){
        this.status = JSON.parse(this.$route.query.status)
    },
    methods:{
        // 路由跳转
        toRoutes(e, userId) {
            let route = {
                name: e,
                query: { userId: JSON.stringify(userId) }
            };
            this.$router.push(route);
        },
    }
}
</script>
<style scoped lang="less">
.app-container {
    padding: 0.1px !important;
    .color {
        color: #606266;
    }
    .img {
        width: 136px;
        display: table;
        margin: 0 auto;
    }
}
.red {
    color: red;
}
.fontSize16 {
    font-size: 16px;
}
.center {
    text-align: center;
}
.nav-p {
    margin-top: 166px;
    margin-bottom: 20px;
}
.title-p {
    margin-top: 20px;
    margin-bottom: 20px;
}
.btn {
    display: table;
    margin: 0 auto;
    margin-top: 40px;
}
.spanBtn{color:#409eff;cursor: pointer;}
</style>